<template>
	<view class="app-app-invite" :style="[AppSkinVar]">
		<view class="app-app-invite__bg">
			<image :src="url"></image>
		</view>
		<view class="ios-btm"></view>
		<view class="fixed-bottom bg-white">
			<view class="app-app-invite__box e-flex e-p-30 bg-white">
				<button class="e-flex-xy-center e-m-r-60" @tap="down">
					<text>{{ $t('user.保存到相册') }}</text>
				</button>
				<button class="bg-primary e-flex-xy-center" @tap="popupShow = true">
					<text>{{ $t('user.分享邀请好友') }}</text>
				</button>
			</view>
		</view>
		
		<invite-popup :show="popupShow" :url="url" @close="popupShow = false"></invite-popup>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import invitePopup from './child/invite-popup.vue';
import { useCurrentInstance } from '@/common/hooks';

const props = defineProps({
	url: String
});

const ctx = useCurrentInstance();

const popupShow = ref(false);
const down = () => {
	props.url &&
		uni.saveImageToPhotosAlbum({
			filePath: props.url
		}).then(() => {
			ctx.$toast(ctx.$t('user.保存相册成功'));
		});
};
</script>

<style lang="scss" scoped>
@include appBem_b(app-invite) {
	padding-bottom: 160rpx;
	@include appBem_e(bg) {
		width: 100vw;
		height: 1448rpx;

		> image {
			width: 100%;
			height: 100%;
		}
	}
	@include appBem_e(box) {
		height: 160rpx;

		button {
			width: 310rpx;
			height: 100%;
			color: #fff;
			font-size: 28rpx !important;
			font-weight: 500;
			letter-spacing: 2rpx;
			border-radius: 50rpx;

			&:first-child {
				color: var(--color-primary);
				border: 2rpx solid var(--color-primary);
			}
		}
	}
}
</style>
